<template>
	<view>
		<view class="orderPage">
			<view class="sub"><u-subsection :list="list" bgColor="#eeeeee" :current="curNow"
					@change="sectionChange"></u-subsection></view>
			<view class="orderList">
				<view class="row" @click="goDetail(item)" v-for="item in orderList" :key="item._id">
					<view class="head">
						<view class="head-left">订单编号{{item.order_no}}</view>
						<view class="head-right">
							<text class="way">商家外送</text>
							<text :class="item.status == 0?'err':'pay'">{{statusText(item.status)}}</text>
						</view>

					</view>
					<view class="body" v-if="item.orderType !='payment'">{{getCarsListName(item.carsList)}}</view>
					<view class="body" v-else>直接转账给商家</view>
					<view class="footer">
						<view class="time">{{formatTimestamp(item.createTime)}}</view>
						<view class="count" v-if="item.orderType !='payment'">
							共{{item.carsList.length}}件商品，实付<text class="price">￥{{item.total_fee}}</text>
						</view>
						<view class="btnGroup">
							<button type="primary" size="mini" @click.stop="orderDone(item._id)"
								v-if="item.done">完成</button>
							<text class="done" v-else>已完成</text>
							<button type="primary" size="mini" v-if="item.done" @click.stop="orderRefundPop(item.out_trade_no)" >退款</button>
						</view>
						<uni-pay ref="pay"  return-url="/pages_manage/order/order" logo="/static/logo.png"></uni-pay>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatTimestamp
	} from '@/utils/tools.js'
	const orderCloudObj = uniCloud.importObject("wanshop-mall-order");
	export default {
		data() {
			return {
				list: ['未付款', '待收货', '售后中'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				curNow: 0,
				orderList: []
			};
		},
		onLoad() {
			this.getOrderList()
		},
		methods: {
			formatTimestamp,
			async getOrderList() {
				let res = await orderCloudObj.getOrderAll();
				console.log(res);
				this.orderList = res.data
			},
			// 支付状态的显示
			statusText(value) {
				let obj = {
					"-2": "支付异常",
					"-1": "已关闭",
					"0": "未支付",
					"1": "已支付",
					"2": "部分退款",
					"3": "已全额退款"
				};
				return obj[value]
			},

			sectionChange(index) {
				this.curNow = index;
			},
			// 跳转到详情页
			goDetail(value) {
				let params = encodeURI(JSON.stringify(value));

				uni.navigateTo({
					url: "/pages/order/detail?item=" + params
				})
			},
			getCarsListName(arr) {
				let name = arr.map(item => {
					return item.name
				})
				return name.join("/")
			},
			orderDone(id) {
				orderCloudObj.updateDone(id).then(res => {
					console.log(res);
				})
				this.getOrderList();
			},
			orderRefundPop(id){
				uni.showModal({
					title:"是否确认退款？",
					success: res =>{
						if(res.confirm){
							this.orderRefund(id)
						}
						console.log(res);
					}
				})
				// return;
				// 
			},
			async orderRefund(id){
				await this.$refs.pay.refund({
					out_trade_no: id, // 插件支付单号
				});
				this.getOrderList();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-bg-color;
	}

	.sub {
		padding: 20rpx 10rpx;
	}

	.orderList {
		padding: 20rpx;

		.row {
			background: #ffffff;
			padding: 40rpx 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.head {
				@include flex-box();

				.head-left {
					@include flex-box-set(start);
					font-size: 26rpx;
					margin-right: 5%;

					.way {
						background: #19be6b;
						color: #ffffff;
						font-size: 24rpx;
						padding: 6rpx 20rpx;
						border-radius: 24rpx;
						margin-left: 10rpx;
					}
				}

				.head-right {
					@include flex-box-set(start, end);
					color: $brand-theme-color-aux;

					.pay {
						font-size: 24rpx;
					}

					.err {
						color: #Fd5c1c;
						font-size: 24rpx;
					}
				}
			}

			.body {
				border: 1rpx solid $border-color;
				padding: 60rpx 20rpx;
				border-radius: 10rpx;
				background: #f7f7f7;
				font-size: 32rpx;
				margin: 30rpx 0;
			}

			.footer {
				@include flex-box();
				font-size: 24rpx;
				color: #787878;

				.price {
					font-weight: bold;
					color: $brand-theme-color;
				}
				.btnGroup{
					@include flex-box();
					margin: 0 5px;
					
					.done{
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>